<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>事件：cut，copy，paste</title>
	</head>
	<body>
		<!--
    事件：cut，copy，paste 发生用于 剪切/拷贝/粘贴 的时候。
    这些事件发生于剪切/拷贝/粘贴一个值的时候。
    它们属于 ClipboardEvent 类，并提供了对剪切/拷贝/粘贴的数据的访问方法。
    我们也可以使用 event.preventDefault() 来中止行为，然后什么都不会被复制/粘贴。
    -->

		<div type="text" id="div">** DIV **</div>

		<script>
			// 1. 剪切事件
			div.addEventListener('cut', (event) => {
				// * document.getSelection() 获取光标选中的文本内容

				alert('触发了剪切事件：' + document.getSelection())
				event.preventDefault() // 阻止剪切
			})

			// 2. 拷贝事件
			div.addEventListener('copy', (event) => {
				// 在浏览器中，当你执行拷贝操作时，浏览器会自动将选中的文本复制到剪贴板，而不会触发 copy 事件。
				// 如果你想在浏览器中测试 copy 事件，你可以在 JavaScript 中手动设置剪贴板的内容，例如：

				// * 设置剪贴板的内容
				event.clipboardData.setData('text/plain', 'hello world')

				// * 获取剪贴板的内容（只能获取设置的内容）
				alert('触发了拷贝事件：' + event.clipboardData.getData('text/plain'))

				event.preventDefault() // 阻止拷贝（阻止后浏览器不会自动将选中的内容复制到剪贴板）
			})

			// 3. 粘贴事件（如果阻止了默认行为， event.clipboardData.getData('text/plain') 将会返回空）
			div.addEventListener('paste', (event) => {
				alert('触发了粘贴事件：' + event.clipboardData.getData('text/plain')) // hello world
				event.preventDefault() // 阻止粘贴
			})
		</script>
	</body>
</html>
